<template>
  <a-list
      :max-height="680"
      :gridProps="{ gutter: 0, span:8 }"
      :bordered="false"
      scrollbar="scrollbar"
      @reach-bottom="fetchQuestionBank"
  >
    <template #scroll-loading>
      <div v-if="bottom">没有更多数据了</div>
      <a-spin v-else />
    </template>
    <a-list-item v-for="item in items" :key="item.id">
      <QuestionBank :icon-url="item.bankIcon" :item-title="item.title" :item-id="item.id" :answerable="true"></QuestionBank>
    </a-list-item>
  </a-list>

</template>

<script setup>
import {ref} from "vue";
import { listQuestionBankVOByPageUsingPost} from "@/api/QuestionBankRequest";
import QuestionBank from "@/components/QuestionBank.vue";

// 得到的数据数组
var items = ref([]);
// 当前数据的页码
var current = ref(1);
// 每页的数据条数
var pageSize = ref(27);
// 是否显示底部的提示信息
var bottom = ref(false);

async function fetchQuestionBank(){
  window.setTimeout(async ()=>{
    const result = await listQuestionBankVOByPageUsingPost({
      current: current.value,
      pageSize: pageSize.value
    });
    current.value = current.value+1;
    if(pageSize.value > result.data.data.records.length){
      bottom.value = true;
    }
    items.value = [...items.value , ...result.data.data.records];
    // TODO 删除测试用代码
    console.log(items);
  } , 1000)
}
</script>

<style scoped>
.bankCard {
  margin-left: 40px;
}

.searchButton{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
</style>